import React from 'react'
import WaterMark from 'components/water-mark'
import { Input, Button } from 'antd'

export default {
  key: 'water-mark',
  name: 'WaterMark 水印',
  author: '张然',
  description: '用于给组件添加水印。',
  isExampleFull: false,
  api: [{
    title: 'API',
    data: [{
      param: 'text', description: '水印文字。', type: 'string', defaultValue: '汇联易'
    }, {
      param: 'fontSize', description: '水印文字字体大小。', type: 'number', defaultValue: '14'
    }, {
      param: 'color', description: '水印文字颜色。', type: 'string', defaultValue: 'rgba(0, 0, 0, 0.1)'
    }, {
      param: 'reg', description: '水印单位偏转角度。', type: 'number', defaultValue: '-20'
    }, {
      param: 'width', description: '水印单位宽度。', type: 'number', defaultValue: '100'
    }, {
      param: 'height', description: '水印单位高度。', type: 'number', defaultValue: '50'
    }, {
      param: 'disabled', description: '是否禁用。', type: 'bool', defaultValue: '-'
    }],
    description: '该组件使用了::pointer-events::属性来放置事件阻挡，如果该属性浏览器不支持，则不会显示水印内容。同时::WaterMark.config(config)::的参数跟以下API一致，可仅设置其中一项或几项，设置的值会覆盖上一次设置的值。同时每个单位内其实是两个水印，左上一个右下一个，所以在设置尺寸的时候要考虑两倍大小。'
  }],
  example: [
    {
      title: '基本用法',
      description: '放在一个有定位的元素内部，不会遮挡使用。',
      state: {},
      getMethod: context => {
        return {

        }
      },
      getContent: context => {
        const {} = context.state;
        return (
          <div>
            <div style={{ width: '100%', height: 200, position: 'relative' }}>
              <WaterMark/>
              这是内容<br />
              <Button>按钮</Button><br/>
              <Input placeholder='请输入'/>
            </div>
          </div>
        )
      }
    },
    {
      title: '全局设置',
      description: '通过::WaterMark.config::设置全局配置，设置后需要重新进入页面查看。',
      state: {
        value: ''
      },
      getMethod: context => {
        return {
          onClick: () => {
            const { value } = context.state;
            WaterMark.config({
              text: value
            });
          }
        }
      },
      getContent: context => {
        const { value } = context.state;
        return (
          <div>
            <div style={{ width: '100%', height: 200, position: 'relative' }}>
              <WaterMark/>
              <Input
                placeholder='请输入要设置的水印内容'
                value={value}
                onChange={e => context.setState({ value: e.target.value })}
              />
              <br/>
              <Button onClick={context.onClick}>设置水印内容</Button>
            </div>
          </div>
        )
      }
    }
  ]
}
